<template>
    <el-container class="manage-container">
        <!--侧边栏 - 在移动端添加条件渲染-->
        <el-aside 
            :width="sideWidth + 'px'" 
            :class="{ 'mobile-aside': isMobile, 'aside-hidden': isMobile && !showSidebar }"
            style="background-color: rgb(48, 65, 86); height: 100%" 
            id="myTransition"
        >
            <!-- 在移动端时，强制不折叠菜单 -->
            <Aside :isCollapse="isMobile ? false : isCollapse" />
        </el-aside>

        <el-container>
            <!--头部 - 移除 background-color 属性-->
            <el-header class="main-header">
                <Header :isCollapse.sync="isCollapse" @toggle-sidebar="toggleSidebar" />
            </el-header>

            <!--遮罩层 - 移动端侧边栏显示时的背景遮罩-->
            <div 
                v-if="isMobile && showSidebar" 
                class="sidebar-overlay" 
                @click="showSidebar = false"
            ></div>

            <el-main>
                <!--当前路由的子路由会在 router-view 中展示-->
                <router-view />
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";

export default {
    name: "Manage",
    data() {
        return {
            isCollapse: false,
            sideWidth: 200,
            isMobile: false,
            showSidebar: false,
            screenWidth: document.body.clientWidth
        }
    },
    components: {
        Aside, Header,
    },
    watch: {
        isCollapse(newVal) {
            // 只在桌面端时更改宽度
            if (!this.isMobile) {
                this.sideWidth = newVal ? 64 : 200;
            }
        },
        screenWidth(val) {
            this.checkScreenWidth(val);
        }
    },
    created() {
        this.checkScreenWidth(document.body.clientWidth);
    },
    mounted() {
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            this.screenWidth = document.body.clientWidth;
        },
        checkScreenWidth(width) {
            // 判断是否为移动端尺寸（小于768px）
            this.isMobile = width < 768;
            
            // 在移动端时设置侧边栏状态
            if (this.isMobile) {
                // 移动端: 侧边栏隐藏，宽度始终设为200
                this.showSidebar = false;
                this.sideWidth = 200;
            } else {
                // 桌面端: 侧边栏始终显示，根据折叠状态设置宽度
                this.showSidebar = true;
                this.sideWidth = this.isCollapse ? 64 : 200;
            }
        },
        toggleSidebar() {
            if (this.isMobile) {
                // 移动端只切换显示/隐藏
                this.showSidebar = !this.showSidebar;
            }
        }
    }
};
</script>
<style>
.manage-container {
    height: 100%; 
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

#myTransition {
    transition: width 100ms ease-out;
}

/* 添加这个样式来覆盖 el-header 的默认背景色 */
.main-header {
    background-color: transparent !important;
    padding: 0 !important;
}

.el-header {
    background-color: transparent !important;
    padding: 0 !important;
}
::v-deep(.el-main) {
    padding: 0 !important;
}

/* 移动端适配样式 */
.mobile-aside {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100% !important;
    z-index: 999;
    transition: transform 0.3s ease-in-out !important;
    width: 200px !important; /* 确保移动端侧边栏宽度固定 */
}

.aside-hidden {
    transform: translateX(-100%);
}

/* 侧边栏遮罩 */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    transition: opacity 0.3s;
}

/* 响应式样式 */
@media screen and (max-width: 768px) {
    .el-main {
        padding: 10px !important;
    }
    
    .el-header {
        padding: 0 10px !important;
    }
    
    /* 移动端下的内容区域要留出空间 */
    .el-container .el-container {
        margin-left: 0 !important;
    }
}
</style>
